<template>
  <div class="mixin-components-container">
    <el-row>
      <el-form ref="form" :model="form" :rules="rules" label-width="130px">
        <el-card class="box-card" style="margin-bottom:20px;">
          <div slot="header" class="clearfix">
            <span>UART</span>
          </div>
          <div>
            <el-form-item label="服务ID" class="is-required">
              <el-input v-model.number="form.id" placeholder="请输入一个整数" />
            </el-form-item>
            <el-form-item label="服务名称" class="is-required">
              <el-input v-model="form.ServiceName" placeholder="请输入服务名称" />
            </el-form-item>
            <el-form-item label="协议名称" class="is-required">
              <el-input v-model="form.ProtocolName" :disabled="true" />
            </el-form-item>
            <el-form-item label="协议编号" class="is-required">
              <el-input v-model="form.ProtocolNum" :disabled="true" />
            </el-form-item>
            <el-form-item label="服务地址" class="is-required">
              <el-input v-model="form.ServiceAddress" placeholder="请输入服务地址" />
            </el-form-item>
            <el-form-item label="串口号" class="is-required">
              <el-input v-model="form.ProtocolData.Port" placeholder="请输入串口号" />
            </el-form-item>
            <el-form-item label="波特率" class="is-required">
              <el-select v-model.number="form.ProtocolData.Baud" placeholder="请选择波特率">
                <el-option label="110" :value="110" />
                <el-option label="300" :value="300" />
                <el-option label="600" :value="600" />
                <el-option label="1200" :value="1200" />
                <el-option label="2400" :value="2400" />
                <el-option label="4800" :value="4800" />
                <el-option label="9600" :value="9600" />
                <el-option label="14400" :value="14400" />
                <el-option label="19200" :value="19200" />
                <el-option label="38400" :value="38400" />
              </el-select>
            </el-form-item>
            <el-form-item label="数据位" class="is-required">
              <el-select v-model.number="form.ProtocolData.Bytesize" placeholder="请选择数据位">
                <el-option label="5" :value="5" />
                <el-option label="6" :value="6" />
                <el-option label="7" :value="7" />
                <el-option label="8" :value="8" />
              </el-select>
            </el-form-item>
            <el-form-item label="校验位" class="is-required">
              <el-select v-model="form.ProtocolData.Parity" placeholder="请选择校验位">
                <el-option label="PARITY_NONE" value="PARITY_NONE" />
                <el-option label="PARITY_EVEN" value="PARITY_EVEN" />
                <el-option label="PARITY_ODD" value="PARITY_ODD" />
                <el-option label="PARITY_MARK" value="PARITY_MARK" />
                <el-option label="PARITY_SPACE" value="PARITY_SPACE" />
              </el-select>
            </el-form-item>
            <el-form-item label="停止位" class="is-required">
              <el-select v-model.number="form.ProtocolData.Stopbits" placeholder="请选择停止位">
                <el-option label="1" :value="1" />
                <el-option label="1.5" :value="1.5" />
                <el-option label="2" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="超时时间" class="is-required">
              <el-input v-model.number="form.ProtocolData.Timeout" placeholder="请输入超时时间" />
            </el-form-item>
            <el-form-item label="软件控流" class="is-required">
              <el-select v-model="form.ProtocolData.Xonxoff">
                <el-option label="false" :value="false" />
                <el-option label="true" :value="true" />
              </el-select>
            </el-form-item>
            <el-form-item label="硬件控流" class="is-required">
              <el-select v-model="form.ProtocolData.Rtscts">
                <el-option label="false" :value="false" />
                <el-option label="true" :value="true" />
              </el-select>
            </el-form-item>
            <el-form-item label="字符间隔超时" class="is-required">
              <el-input v-model.number="form.ProtocolData.InterByteTimeOut" placeholder="请输入字符间隔超时" />
            </el-form-item>
            <el-form-item label="Protocol" class="is-required">
              <el-select v-model="form.ProtocolData.Rule[0].Protocol" placeholder="请选择Protocol">
                <el-option label="TCP" value="TCP" />
                <el-option label="UDP" value="UDP" />
              </el-select>
            </el-form-item>
            <el-form-item label="Host" class="is-required">
              <el-input v-model="form.ProtocolData.Rule[0].Host" placeholder="请输入host" />
            </el-form-item>
            <el-form-item label="Port" class="is-required">
              <el-input v-model.number="form.ProtocolData.Rule[0].Port" placeholder="请输入port" />
            </el-form-item>
            <el-form-item label="BufSize" class="is-required">
              <el-input v-model.number="form.ProtocolData.Rule[0].BufSize" placeholder="请输入BufSize" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">立即提交</el-button>
            </el-form-item>
          </div>
        </el-card>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  components: { },
  data() {
    return {
      form: {
        id: undefined, // int 服务id（用户自定义）
        SeviceName: '', // string 服务名称
        ProtocolNum: '1002', // string 协议编号
        ProtocolName: 'UART', // string 协议名称
        ServiceAddress: '', // string 服务地址
        ProtocolData: {
          ProtocolNum: '1002', // string 协议编号
          ProtocolName: 'UART', // string 协议名称
          Port: '', // string 串口号 默认为None(自动分配未使用的串口)
          Baud: undefined, // int 波特率 提供默认选项(110,300,600,1200,2400,4800,9600,14400,19200,38400)和自定义
          Bytesize: '', // string 字节大小（数据位） 可选项为FIVEBITS, SIXBITS, SEVENBITS, EIGHTBITS（5，6，7，8）
          Parity: '', // string 校验位 可选项为PARITY_NONE, PARITY_EVEN, PARITY_ODD PARITY_MARK, PARITY_SPACE
          Stopbits: '', // string 停止位 可选项STOPBITS_ONE, STOPBITS_ONE_POINT_FIVE, STOPBITS_TWO（1，1.5，2）
          Timeout: undefined, // float 读超时时间
          Xonxoff: undefined, // bool 软件流控 默认为False
          Rtscts: undefined, // bool 硬件流控 默认为False
          InterByteTimeOut: undefined, // float 字符间隔超时 默认为None
          Rule: [
            {
              Protocol: '', // tcp或者udp
              Host: '', // ip地址
              Port: undefined, // int 端口号
              BufSize: undefined // int 缓冲区大小
            }
          ]
        }
      },
      rules: {
        id: [{ required: true, message: '请输入服务ID', trigger: 'blur' }],
        SeviceName: [{ required: true, message: '请输入服务名称', trigger: 'blur' }],
        ProtocolName: [{ required: true, message: '请选择协议名称', trigger: 'blur' }],
        ProtocolNum: [{ required: true, message: '请选择协议名称', trigger: 'blur' }],
        ServiceAddress: [{ required: true, message: '请输入服务地址', trigger: 'blur' }]
      }
    }
  },
  methods: {
    onSubmit() {
      console.log(this.form)
      axios({
        method: 'post',
        url: 'http://192.168.10.152:5002/protocol/add_protocol',
        data: this.form
      }).then((res) => {
        if (res.data.code === 200) {
          this.$message.success('添加成功')
          setTimeout(() => {
            this.$router.push({
              path: '/protocol/table'
            })
          }, 1000)
        } else {
          this.$message.error('该服务id已存在，请重新添加!')
        }
        console.log(res)
      })
    }
  }
}
</script>
<style scoped>
.mixin-components-container {
  background-color: #f0f2f5;
  padding: 30px;
  min-height: calc(100vh - 84px);
}
.component-item{
  min-height: 100px;
}
.el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>

